import styled from 'styled-components'

export const PictureBrowserWrapper = styled.div`

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgb(33, 33, 33);
  opacity: 1;
  display: flex;
  flex-direction: column;

  .top {
    position: relative;
    height: 86px;

    .close-btn {
      position: absolute;
      top: 15px;
      right: 25px;
      color: #fff;
      cursor: pointer;
    }
  }

  .slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: hidden;

    .control{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      color: #fff;
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }

    .picture {
      position: relative;
      height: 100%;
      overflow: hidden;
      width: 100% !important;
      //max-width: 105vh !important;

      img {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        user-select: none;
      }
    }
    .fade-enter{
      transform: translate(${props=>props.isNext?'100%':'-100%'});
      opacity: 0;
    }
    .fade-enter-active{
      opacity: 1; 
      transform: translate(0);
      transition: all 0.15s ease;
    }
    .fade-exit{
      opacity: 1;
    }
    .fade-exit-active{
      opacity: 0;
      transition: all 0.15s ease;
    }
  }
  .preview{
    display: flex;
    justify-content: center;
    height: 100px;
    margin-top: 10px;
    .desc{
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      .toggle{
        cursor: pointer;
      }
    }
    .info{
      position: absolute;
      bottom: 10px;
      max-width: 108vh;
      .list{
        margin-top: 3px;
        overflow: hidden;
        transition: height 0.3s ease;
        height: ${props=> props.showList ? '67px':0};
        .item{
          margin-right: 15px;
          cursor:pointer;
          img{
            height: 67px;
            opacity: 0.5;
          }
          &.active{
            img{
              opacity: 1;
            }
          }
        }
      }
    }
    
  }

`
